...añadiendo
pullquotes en una entrada.
¿Qué tal si probamos?

Suerte..

Crear una entrada diferente no es tan difícil sobre todo cuando tenemos una ayuda extra por parte de Mandarin Design
Hay que perder el miedo y no pensar que nos va a salir mal, después de todo vamos a probar en una entrada y si cometemos errores la eliminamos y listo.
Lo que vamos a hacer es añadir pullquotes.
Se trata de crear un espacio para añadir un tipo de letra más grande en la misma página, sirve para conducir a los lectores en un artículo y para destacar un tema en especial. Se utiliza principalmente en el periodismo y la edición.



...texto pullquote
texto pullquote - texto pullquote
texto pullquote - texto pullquote
texto pullquote texto pullquote...


La forma de hacerlo es tan sencilla como copiar y pegar el siguiente código.
He distinguido con diferente color para saber donde situar el texto del pullquote (color azul) y texto de la entrada color (verde) espero que ahora si ¿verdad Jaime?







<div style="background: white none repeat scroll 0% 50%; color: rgb(56, 46, 46); width: 150px; height: 100px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; opacity: 0.9; float: right; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; line-height: 16px; text-align: right;">
<span style="opacity: 0.75;">...texto pullquote</span>
texto pullquote - texto pullquote
<b>texto pullquote - texto pullquote</b>
texto pullquote <span style="opacity: 0.9;">texto pullquote...</span>
</div>

<p style="text-align: justify;">texto de la entrada-texto de la entrada-texto de la entrada
</p><p style="text-align: justify;">
</p>
<div style="clear: both;">
</div>


Más sobre pullquotes


...this will look like some of the pullquotes or subtitles we see in magazine
layout.........

Hay muchas formas para decorar un pullquote y hacer que este sea un punto de atención que es de lo que se trata, enmarcarlo como en este ejemplo de Mandarin Design




O como en este caso... jugando con el padding, margin y width del código.


Imagen de fondo...


De lo que se trata es de perder el miedo a los resultados, de probar no sólo con estos ejemplos sino con otros muchos que nos pueden hacer pasar un rato agradable y obtener efectos originales para nuestras entradas.



<p style="border: 0px solid black; margin: 20px; padding: 47px; background: transparent url(Url-de-la-imagen) repeat scroll 0% 50%; float: right; width: 30%; font-size: 0.8em; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<strong>Texto sobre imagen...</strong>
</p>
Texto de la entrada.


Más sobre Blockquotes

AleMamá

Está muy bueno. Gracias, siempre sorprendiéndonos.

Responder
Anónimo

Dato:
Sin tocar nada con el mouse se abrió una ventana a geovisited

Responder
Anónimo

Gema, disculpa pero soy duro de entender. Dices:

"añadir nuestro texto donde indica 'Aquí tu texto' "

Y más abajo dices:

"Luego, localizaremos el texto resaltado del pullquote y lo sustituiremos por el nuestro".

1. ¿Adonde está el texto resaltado? ¿adonde y como se encuentra?

2. Más adelante dices: "¿lo sustituiremos por el nuestro?" ¿Qué no ya el nuestro lo habíamos puesto en "Aqui tu texto?

NO le entiendo :(

Responder
Emmanuel Joven

hola soy jandro de unyversaltime y queria decirte que por mni parte estas agregada asi que si quieres agregarme ...
bue de todas formas quiero que te pases gracias.

Responder
La Blogueria

Me encanta Mandarin Design, una vez que entras tardas en salir...lástima que no actualizan desde hace años por lo que veo (no es que importe: el material ahí es mucho y completo).

Y me encantan las pullquotes... un consejo es ir probando a ajustar los espacios hasta conseguir posicionarla como quieres, en el primer caso que muestras, porque a veces queda un poco raro... aunque como dicen en Mandarin Design, ¡los errores pueden ser hermosos!

Ojalá se usaran más las pullquotes en los textos, alivian el párrafo y enfocan y hace más agradable la lectura.

¡Saludos!

Responder
Anónimo

Anónimo tiene razón Gem@, he terminado por quitar de mi blog el Geoglobe, es el responsable de las ventanas de publi, no se como lo consiguen los muy...pero sale la publi unos días si y otros no, así te confunden para que tardes en darte cuenta que viene de allí.

Responder
Anónimo

Buenas Gem@!! Hace un tiempito que no entraba... me gusta como quedó la cabecera, y la frase mucho mejor!

Saludos!

Responder
Gem@

!Hola Ale¡ tu visita siempre es una sorpresa agradable. Un abrazo amiga :D

anónimo muchas gracias, atendiendo tu indicación y la de Roa he procedido a suprimir el contador.
Mil gracias esos detalles siempre ayudan a mejorar ;)

Hola Jaime. Cuando me refería a "el texto resaltado del pullquote y lo sustituiremos por el nuestro..." lo hacía teniendo en cuenta que el código proporcionado es para el ejemplo que hay anterior a el código. Lo que hay que observar es el texto del Pullquote y buscar esas palabras en el código...
(El texto resaltado es el que aparece en el Pullquote del ejemplo. El otro texto a sustituir era el de la entrada...

De todas formas olvidamos todo lo anterior porque he procedido a actualizar la entrada, he añadido color en las partes que debes prestar atención y modificarlas. Y agregué la palabra "texto" donde hay que escribir detallando si es el texto para el Pullquote o la entrada donde vamos a incorporar el Pullquote.
(Lamento si te he creado confusión)

Hola Jandro bienvenido, gracias por enlazarme, pasaré por tu blog ;)

La Blogueria jajaja además de enamorarte del html también lo estás haciendo de Mandarin Design ufffff voy a pensar que esto es contagioso :D gracias por estar.

Gracias Rosa, son la repera :( ya lo he suprimido. Un abrazo.

Hola Cristian muchas gracias amigo ¿qué le pasa a tu enlace?

Responder
Anónimo

¡Eresx un encanto, Gema! gracias

Responder
Gem@

Si tu lo dices ... ;)

Responder
Unknown

Hola gem@!!! sí es esto lo que buscaba. pero ¿cómo hago para justificar la pullquote a la izquierda? en tus ejemplos están justificadas a la derecha y temo que me haré un lío..............oooooo

Responder
Unknown

he conseguido alinearlo a la izquierda pero se me superpone el texto al pullquote y queda encima de lo otro...

Responder
Gem@

Sin verlo no sé donde está el error :O

Responder
Anónimo

Hola Gema! buscando cómo hacer el pullquote leo lo de geoglobe y yo lo tengo en mezclazul. Te sale publicidad cuando entrás en mi blog?
Mezcla Azul

Responder
Gem@

» Pues no Graciela, me habría dado cuenta ayer pero he mirado de nuevo y no veo nada de publicidad :)

Responder
Anónimo

Gracias Gema! Me iba a dar mucha pena tener que quitar el geoblobo porque funciona bien y queda bonito.
Por cierto, el pullquote me quedó super bien. Gracias y saludos!

Responder
Gem@

A veces cuesta prescindir de cosas pero si es algo que genera publicidad no tiene que dar ninguna pena siempre habrá algo que lo sustituya.
Quedó bien lindo ;)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top